import React, {Component} from 'react';
import { StyleSheet, Text, View ,Image,ScrollView,Clipboard} from 'react-native';

import musicList from './musicList.js'
import sadassa from './daohang.js'
import {List, Flex, Toast, Carousel, Modal, Provider, Button, InputItem, Icon} from '@ant-design/react-native';
import AsyncStorage from '@react-native-community/async-storage';

import moment from 'moment'
import md5 from "react-native-md5";
const Item = List.Item;
const Brief = Item.Brief;


export default class Qqmusic extends Component {
    static navigationOptions = {
        title: 'QQ音乐',
        header: null,
        tabBarIcon: ({ focused }) => {
            const icon = focused
                ? require('../assets/images/tab_home_active.png')
                : require('../assets/images/tab_home.png');
            return <Image source={icon} style={{ height: 22, width: 22 }} />;
        },
    };
    async componentDidMount()
    {
        let today =  await AsyncStorage.getItem('@today')
        if(!today){
            await AsyncStorage.setItem('@today',moment().add(2,'days').format('YYYYMMDD'))
        }
    }
    componentWillUnmount(){
        this.setIme && clearInterval(this.setIme)
    }
    constructor(props){
        super(props);
        this.state = {
            visible: false,
            passwrod:'',
            xjlb:sadassa,
            dqgq:null,
            isJdjs:false,
            name:'',
            djsNb:20

        };
        this.onClose = () => {
            clearInterval(this.djs)
            clearTimeout(this.yshiqi)

            this.setState({
                visible: false,
            });
            this.setState({isJdjs:false})
            this.setState({djsNb:20})
        };
        this.setIme = setInterval(()=>{
            this.setState({dqgq:global.curMusicName})
        },2000)
        this.yshiqi = null
        this.djs = null
        this.curmicji = null
    }
    async copys(){

       Clipboard.setString('flying-bird-studio')
       let str = await Clipboard.getString();
        console.warn(str);
        Toast.info('已复制微信号，请去微信添加好友！')
    }

    async jihuo(){
        let aa = md5.hex_md5(moment().format('YYYYMMDD')+'t')
        if(this.state.passwrod==aa){
            try {
                await AsyncStorage.setItem('@isJh','keneng')
                this.setState({ visible: false })
                alert('激活成功!');
            } catch (e) {
                alert('失败:');
            }

        }else {
            alert('无效激活码');
        }
    }
     bujihuo(){
          this.setState({isJdjs:true})
          this.djs = setInterval(()=>{
              this.setState({djsNb:this.state.djsNb - 1})
          },1000)
          this.yshiqi = setTimeout(()=>{
              clearInterval(this.djs)
              this.setState({ visible: false })
              this.setState({isJdjs:false})
              this.setState({djsNb:20})
             const {navigate} = this.props.navigation;
             navigate('Yyxq', {
                 item: this.curmicji,
             })
         },21000)
    }
     chufatc(l){
        this.curmicji = l
        this.setState({ name: l.name })
        this.setState({ visible: true })

    }

    render() {
        const {navigate} = this.props.navigation;
        return (<Provider style={{ flex: 1,flexDirection: 'column'}}>{this.state.dqgq?<View style={{width:'100%', height:50,zIndex:999,bottom:0,left:0, position:'absolute',backgroundColor:'#008fff' }} >
            <Text onPress={ () => {
                global.curMusic.getCurrentTime(seconds => {
                    global.seconds = seconds
                    global.isjinru = true
                    navigate('Yyxq', {
                        item: musicList.find(item=>{
                            return item.name == this.state.dqgq
                        }),
                    })
                })

            }} style={{color:'#fff',lineHeight:50,width:'100%',paddingLeft:20,fontSize:20}}>{this.state.dqgq +'正在播放...'}</Text>
        </View>:null}

            <View style={{width:100,zIndex:999,top:50,right:0, position:'absolute'}} >
                {this.state.xjlb.map((l, i) =>{
                    return (<Button type={l.cur?'primary':'ghost'} size="small" key={i} onPress={  () => {
                        if(this.myScrollView1){
                            this.myScrollView1.scrollTo({ x: 0, y:l.gdgd, animated: true});
                        }

                        let arr = JSON.parse(JSON.stringify(this.state.xjlb))
                        arr.forEach((item2,inde2)=>{
                            if(i==inde2){
                                item2.cur = true
                            }  else {
                                item2.cur = false
                            }
                        })
                        this.setState({ xjlb: arr })

                    }}>
                        {l.zjm}
                    </Button>)

                })}
            </View>

            <ScrollView ref={(view) => { this.myScrollView1 = view; }}>
                <Modal
                    title="请先激活后正常使用！"
                    transparent
                    onClose={this.onClose}
                    maskClosable={false}
                    visible={this.state.visible}
                    closable
                   // footer={footerButtons}
                >
                    <View style={{paddingTop: 15 }}>
                    <InputItem
                        value={this.state.passwrod}
                        onChange={passwrod => {
                            this.setState({
                                passwrod,
                            });
                        }}
                        placeholder="请输入激活码"
                    >
                    </InputItem>
                    </View>
                    <Text style={{ textAlign: 'center',color:'#0085f3',fontSize:20,lineHeight:35}} onPress={()=>{
                        this.jihuo()
                    }}>确认激活</Text>
                    <View style={{ paddingVertical: 20 }}>
                    <Text style={{ textAlign: 'center',color:'#07bb5e',fontSize:18 }}>需获取激活码请加@飞鸟乐享微信：flying-bird-studio</Text>
                    </View>
                    <View style={{ paddingVertical: 20 }}>
                        <Button type={"primary"} onPress={()=>{
                            this.copys()
                        }}>点击复制微信号</Button>

                    </View>
                    {
                        this.state.isJdjs? <Text style={{textAlign:'center',color:'#f00'}} >等待{this.state.djsNb}秒后播放...{this.state.name}</Text>: <Text style={{textAlign:'right'}} onPress={()=>{
                            this.bujihuo()
                        }}>我不激活继续使用》》</Text>
                    }

                </Modal>
            <View style={styles.container}>
                <List renderHeader={'我爱的伦全部专辑'}>
                    {
                        musicList.map((l, i) => (
                            <Item thumb={<Image source={l.img} style={{ height: 50, width: 50,marginRight:10 }} />
                            }  multipleLine key={i}
                                   onPress={ async () => {{
                                       try {

                                         let result =   await AsyncStorage.getItem('@isJh')
                                          if(!result){
                                              let today =  await AsyncStorage.getItem('@today')
                                            if(moment().isBefore(today)){
                                                 navigate('Yyxq', {
                                                     item: l,
                                                 })
                                             }else {
                                                  this.chufatc(l)
                                             }
                                           }else {
                                               navigate('Yyxq', {
                                                   item:l,
                                               })
                                           }
                                       } catch (e) {
                                           // saving error
                                       }


                                    }
                                   }}
                                   >
                                 {l.name}<Brief style={{fontSize:14}}>{l.time}</Brief>
                           </Item>
                        ))
                    }
                </List>
            </View>
                <View style={{height:60}}></View>
            </ScrollView>
        </Provider>);
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
})
